<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragment/headFragment:: head"></div>
<body class="cbp-spmenu-push">
<div class="main-content">
	<!--left-fixed -navigation-->
	<div th:replace="fragment/left_sidebar:: left_sidebar"></div>
	<!--left-fixed -navigation-->
	<!-- header-starts -->
	<div th:replace="fragment/header_section :: header_section"></div>
	<!-- //header-ends -->
	<!-- main content start-->

	<div id="page-wrapper">
		<div class="main-page">
			<div class="col-md-3">
				<div class="alert alert-info" role="alert">
					<h4 style="text-align: center">消息总量</h4>
					<h2 style="text-align: center" th:text="${TotalMessageCountSum}"><strong></strong></h2>
				</div>
			</div>
			<div class="col-md-3">
				<div class="alert alert-info" role="alert">
					<h4 style="text-align: center">会话总量</h4>
					<h2 style="text-align: center" th:text="${TotalSessionCountSum}"><strong></strong></h2>
				</div>
			</div>
			<div class="col-md-3">
				<div class="alert alert-info" role="alert">
					<h4 style="text-align: center">有效会话总量</h4>
					<h2 style="text-align: center" th:text="${TotalEffectiveSessionCountSum}"><strong></strong></h2>
				</div>
			</div>
			<div class="col-md-3">
				<div class="alert alert-info" role="alert">
					<h4 style="text-align: center">结束会话总量</h4>
					<h2 style="text-align: center" th:text="${TotalEndSessionCountSum}"><strong></strong></h2>
				</div>
			</div>
			<div class="col-md-12 charts charts-grids">
				<h4 class="title">结束会话时间区间统计</h4>
				<canvas id="bar" height="200" width="400" style="width: 200px; height: 400px;"></canvas>
			</div>
			<div class="panel-body widget-shadow">
				<table class="table">
					<thead>
					<tr>
						<th>id</th>
						<th>客服昵称</th>
						<th>消息总量</th>
						<th>会话总量</th>
						<th>有效会话总量</th>
						<th>结束会话总量</th>
						<th>会话总时长</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="cs, rowInfo : ${lists}">
						<td th:text="${cs.getId()}"></td>
						<td th:text="${cs.getNickname()}"></td>
						<td th:text="${cs.getTotalmessagecount()}"></td>
						<td th:text="${cs.getTotalsessioncount()}"></td>
						<td th:text="${cs.getTotaleffectivesessioncount()}"></td>
						<td th:text="${cs.getTotalendsessioncount()}"></td>
						<td th:text="${cs.getTotalsessiontime()}"></td>
					</tr>
					</tbody>
				</table>
				<ul class="pagination pagination-sm">
					<li class="active"><a th:href="@{/workloadStatistics/index(current=1,size=10)}">«</a></li>
					<!--                    <li class="active"><a href="#">1</a></li>-->
					<li><a th:href="@{/workloadStatistics/index(current=${i}, size = 10)}" th:each="i : ${#numbers.sequence(1,pagecount)}"><span th:text="${i}"></span></a></li>
					<li class="active"><a th:href="@{/workloadStatistics/index(current=${pagecount},size=10)}">»</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		<p>Copyright &copy; 2021.Igeek All rights reserved.</p>
	</div>
	<!--//footer-->
</div>
<!-- Classie -->
<script th:inline="javascript">

	var a0 = [[${a}]];
	var barChartData = {
		labels : ["0-1000","1001-2000","2001-3000","3001-4000","4001-5000","5001-6000","6001-7000", "7001-8000"],
		datasets : [
			{
				fillColor : "rgba(79, 82, 186, 0.83)",
				strokeColor : "#4F52BA",
				highlightFill: "#4F52BA",
				data : a0
			}
		]

	};

	new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>
<script src="js/classie.js"></script>
<script>
	var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
			showLeftPush = document.getElementById( 'showLeftPush' ),
			body = document.body;

	showLeftPush.onclick = function() {
		classie.toggle( this, 'active' );
		classie.toggle( body, 'cbp-spmenu-push-toright' );
		classie.toggle( menuLeft, 'cbp-spmenu-open' );
		disableOther( 'showLeftPush' );
	};


	function disableOther( button ) {
		if( button !== 'showLeftPush' ) {
			classie.toggle( showLeftPush, 'disabled' );
		}
	}
</script>
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
